<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>Android Asset Studio - Icon Generator - Launcher icons</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery.ui.all.css">
    <script src="lib/canvg/rgbcolor.js"></script> 
    <script src="lib/canvg/canvg.js"></script>

    <script src="js/asset-studio.pack.js"></script>
  </head>
  <body style="background-image:url()">
    <input id="in" value="a">
    <div id="output"></div>
    <div id="status"></div>
    <button>Redraw</button>
    <script>
      $('button').live('click', redraw);
      $('input').live('change, keyup', redraw);
      $(redraw);

      var SZ = 512;

      function redraw2() {
        var startTime = new Date();
        var size = { w: SZ, h: SZ };
        var tmpCtx = imagelib.drawing.context(size);
        var outCtx = imagelib.drawing.context(size);

        tmpCtx.font = 'bold 880px Helvetica';
        tmpCtx.textAlign = 'center';
        tmpCtx.textBaseline = 'baseline';
        var lingrad2 = tmpCtx.createLinearGradient(0,0,0,SZ);  
        lingrad2.addColorStop(0, 'red');  
        lingrad2.addColorStop(1, 'blue');  
        tmpCtx.fillStyle = lingrad2;
        tmpCtx.fillText($('#in').val(), SZ / 2, 490 * SZ / 512);

        imagelib.drawing.blur(15 * SZ / 512, tmpCtx, size);

        imagelib.drawing.copy(outCtx, tmpCtx, size);

        outCtx.save();
        outCtx.globalCompositeOperation = 'source-atop';
        outCtx.fillStyle = 'red';
        outCtx.fillRect(0, 0, SZ / 2, SZ);
        outCtx.restore();
        //imagelib.drawing.copyAsAlpha(outCtx, tmpCtx, size, '#fff', '#000');
        //imagelib.drawing.makeAlphaMask(outCtx, size, '#000');

        $('#output').empty().append(outCtx.canvas);
        $('#status').text(((new Date()) - startTime) + " ms");
        // var canvas = fx.canvas();
        // var texture = canvas.texture(ctx.canvas);
        // canvas.draw(texture).triangleBlur(radius).update();
        // ctx.clearRect(0, 0, canvas.width, canvas.height);
        // ctx.drawImage(canvas, 0, 0);
      }

      function redraw() {
        var startTime = new Date();
        var size = { w: SZ, h: SZ };
        var tmpCtx = imagelib.drawing.context(size);
        var outCtx = imagelib.drawing.context(size);

        tmpCtx.font = 'bold ' + (400 * SZ / 512) + 'px Helvetica';
        tmpCtx.textAlign = 'center';
        tmpCtx.textBaseline = 'baseline';
        tmpCtx.fillStyle = 'red';
        tmpCtx.fillText($('#in').val(), SZ / 2, 490 * SZ / 512, SZ);

        tmpCtx.canvas.style.border = '1px solid #ccc';

        imagelib.drawing.fx([
          {
            effect: 'inner-shadow',
            color: '#fff',
            opacity: 0.75,
            blur: 5 * SZ / 512,
            translate: { y: 5 * SZ / 512 }
          },
          {
            effect: 'inner-shadow',
            color: '#000',
            opacity: 0.4,
            blur: 20 * SZ / 512,
            translate: { y: -5 * SZ / 512 }
          },
          {
            effect: 'outer-shadow',
            color: '#00ccff',
            blur: 20 * SZ / 512,
            translate: { x: 10 * SZ / 512 }
          },
          {
            effect: 'outer-shadow',
            color: '#ffcc00',
            blur: 20 * SZ / 512,
            translate: { x: -10 * SZ / 512 }
          }
        ], outCtx, tmpCtx, size);

        $('#output').empty().append(outCtx.canvas);
        $('#status').text(((new Date()) - startTime) + " ms");
      }
    </script>
  </body>
</html>
